<template>
  <div class="notOnlineMovie">
    <div class="content" ref="content">
      <div class="content-container">
        <div class="line-block-item" v-for="item in notOnlineMovieList" @click="$router.push({path:'/onlineMovieDetails',query:{id:item.id}})">
          <div class="left">
            <img :src="item.posterPicUrl" alt="" style="width: 70px;height: 100%">
          </div>
          <div class="center">
            <p class="name">{{item.name}}</p>
            <p class="introduction">“{{item.nameDesc}}”</p>
            <p class="protagonist">主演：{{item.cast}}</p>
          </div>
          <div class="right">
            <div class="btn-wrapper">
              <button class="btn-buyTicket" @click.stop="$router.push({path:'/chooseCinema',query:{id:item.id,name:item.name}})">{{item.sellTypeDesc}}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import {getStorage} from "../../../../common/js/localStorage";
  export default {
    name: "notOnlineMovie",
    data(){
      return{
        notOnlineMovieList:[]
      }
    },
    mounted() {
      this.notOnlineMovieList = getStorage('comingShow').filmList
      this.$nextTick(()=>{
        if(!this.scroll){
          // return
          let scroll = new BScroll(this.$refs['content'],{click:true})
        }else {
          this.scroll.refresh();
        }
      })
    },
  }
</script>

<style scoped lang="stylus">
  .notOnlineMovie
    height 100%
    .content
      height 100%
      overflow hidden
      .line-block-item
        display flex
        background #171718
        padding 9px 10px
        height 102px
        margin-bottom 10px
        .left
          flex 0 0 74px
          text-align right
          background url('bg_poster.png')no-repeat right center/70px 102px
        .center
          flex 1
          padding 0 15px
          text-align left
          overflow hidden
          .name,.introduction,.protagonist
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
          .name
            margin-top 14px
            height 22px
            line-height 22px
            color #ffffff
            font-size 16px
            font-weight 500
          .introduction
            color #ffffff
            font-size 12px
            height 17px
            line-height 17px
            padding-top 8px
          .protagonist
            line-height 16px
            font-size 11px
            color #8B929E
            padding-top 8px
        .right
          flex 0 0 60px
          text-align right
          .score
            padding-top 20px
            color #F7C20F
            font-size 16px
          .btn-wrapper
            padding-top 34px
            .btn-buyTicket
              height 28px
              width 53px
              font-size 14px
              color #161719
              background #EEAC21
              border none
              border-radius 14px
              outline none
</style>
